<script setup lang="ts">
	//
	import XtxGuess from "../../components/XtxGuess.vue"
	import { onMounted, ref } from "vue"
	import type { XtxGuessInstance } from "@/types/components"
import { onLoad } from "@dcloudio/uni-app";
	const guessRef = ref<XtxGuessInstance>();
	const { safeAreaInsets } = uni.getSystemInfoSync();
	const orderTypes = [
		{ type: 1, text: "待付款", icon: "icon-currency" },
		{ type: 2, text: "待发货", icon: "icon-gift" },
		{ type: 3, text: "待收货", icon: "icon-check" },
		{ type: 4, text: "待评价", icon: "icon-comment" },
	]
	const onscroll = () => {
		console.log(1)
		guessRef.value?.getMore();
	}
	const onrefresh = async () => {
		console.log(2)

		guessRef.value?.resetData()



	}
	const key = ref(false);
	const userinfo=ref({});
	onLoad(() => {
		if (uni.getStorageSync("key")) {
			key.value = true
			userinfo.value=JSON.parse(uni.getStorageSync("key"));
		} else {
			key.value = false

		}
	})
</script>

<template>
	<scroll-view style="height:100vh" class="viewport" scroll-y enable-back-to-top @scrolltolower="onscroll">
		<view class="profile" :style="{paddingTop:safeAreaInsets!.top+'px'}">


			<view class="overview" v-if="key == true">
				<navigator url="/pagesMember/profile/profile" hover-class="none">
					<image class="avatar" mode="aspectFill"
						:src="userinfo.avatar"></image>
				</navigator>
				<view class="meta">
					<view class="nickname">{{userinfo.nickname}}
					</view>
					<navigator url="/pagesMember/profile/profile" class="extra" hover-class="none">
						<text class="update">更换头像昵称</text>
					</navigator>
				</view>
			</view>
			<view class="overview" v-else>
				<navigator url="/pages/login/login" hover-class="none">
					<image class="avatar gray" mode="aspectFill"
						src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png">
					</image>
				</navigator>
				<view class="meta">
					<navigator url="/pages/login/login" hover-class="none" class="nickname">未登录</navigator>
					<view class="extra">
						<text class="tips">点击登录账号</text>
					</view>
				</view>
			</view>
			<navigator url="/pagesMember/settings/settings" hover-class="none" class="settings">设置</navigator>
		</view>
		<view class="orders">
			<view class="title">
				我的订单

				<navigator class="navigator" url="/pagesOrder/list/list?type=0" hover-class="none">查看全部订单 <text
						class="icon-right"></text></navigator>
			</view>

			<view class="section">
				<navigator :url="`/pagesOrder/list/list?type=${item.type}`" v-for="item in orderTypes" :key="item.type"
					:class="item.icon" class="navigator" hover-class="none">{{item.text}}</navigator>
				<button class="contact icon-handset" open-type="contact">售后</button>
			</view>
		</view>
		<view class="guess">
			<XtxGuess ref="guessRef"></XtxGuess>

		</view>
	</scroll-view>
</template>

<style lang="scss">
	page {
		height: 100%;
		overflow: hidden;
		background-color: #f7f7f8;
	}

	.viewport {
		height: 100%;
		background-repeat: no-repeat;
		background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/center_bg.png);
		background-size: 100% auto;
	}

	/* 用户信息 */
	.profile {
		margin-top: 20rpx;
		position: relative;

		.overview {
			display: flex;
			height: 120rpx;
			padding: 0 36rpx;
			color: #fff;
		}

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #eee;
		}

		.gray {
			filter: grayscale(100%);
		}

		.meta {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			line-height: 30rpx;
			padding: 16rpx 0;
			margin-left: 20rpx;
		}

		.nickname {
			max-width: 350rpx;
			margin-bottom: 16rpx;
			font-size: 30rpx;

			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.extra {
			display: flex;
			font-size: 20rpx;
		}

		.tips {
			font-size: 22rpx;
		}

		.update {
			padding: 3rpx 10rpx 1rpx;
			color: rgba(255, 255, 255, 0.8);
			border: 1rpx solid rgba(255, 255, 255, 0.8);
			margin-right: 10rpx;
			border-radius: 30rpx;
		}

		.settings {
			position: absolute;
			bottom: 0;
			right: 40rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}

	/* 我的订单 */
	.orders {
		position: relative;
		z-index: 99;
		padding: 30rpx;
		margin: 50rpx 20rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

		.title {
			height: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #1e1e1e;

			.navigator {
				font-size: 24rpx;
				color: #939393;
				float: right;
			}
		}

		.section {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 40rpx 20rpx 10rpx;

			.navigator,
			.contact {
				text-align: center;
				font-size: 24rpx;
				color: #333;

				&::before {
					display: block;
					font-size: 60rpx;
					color: #ff9545;
				}
			}

			.contact {
				padding: 0;
				margin: 0;
				border: 0;
				background-color: transparent;
				line-height: inherit;
			}
		}
	}

	/* 猜你喜欢 */
	.guess {
		background-color: #f7f7f8;
		margin-top: 20rpx;
	}
</style>